<template>
  <h2>composition-api(组合式api)</h2>

  <h4>计数器</h4>
  <button @click="minus">-</button>
  <span>count: {{ count }}</span>
  <button @click="add">+</button>
  <div>doubleCount: {{ doubleCount }}</div>

  <h4>todolist</h4>
  <input type="text" v-model="textValue" />
  <button @click="submit">发布</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>

  <h4>pro列表</h4>
  <ul>
    <li v-for="item in proList" :key="item.proid">{{ item.proname }}</li>
  </ul>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

const count = ref(10);
const add = () => {
  count.value++;
};
const minus = () => {
  count.value--;
};
const doubleCount = computed(() => {
  return count.value * 2;
});

// 功能2
const textValue = ref("");
const list = ref([
  {
    id: 1,
    name: "zhangsan",
  },
  {
    id: 2,
    name: "lisi",
  },
]);
const submit = () => {
  list.value.push({
    id: new Date().getTime(),
    name: textValue.value,
  });
  textValue.value = "";
};
const remove = (id) => {
  list.value = list.value.filter((item) => item.id !== id);
};

// 功能3
const proList = ref([]);
onMounted(() => {
  fetch("http://121.89.205.189:3000/api/pro/list")
    .then((response) => response.json())
    .then((res) => {
      proList.value = res.data;
    });
});
</script>
